<template>
    <!-- @keydown.enter="doSearch()" -->
    <view class="spec-box">
        <view>
            <text class="s-tit" v-if="!isNoShow" >{{ titleTxt.title }}</text>
            <text v-if="spec">{{ titleTxt.titleTxt }}</text>
        </view>
        <view class="s-desc">{{ titleTxt.titleDesc }}</view>
        <view class="s-box" v-if="type == 1">
            <input
                class="ipt-search"
                type="search"
                id="searchSpec"
                @input="searchInput"
                @keydown.enter="keydownEnter()"
                :focus="isSearching"
                v-model="kw"
                :placeholder="placeholder"
            />
            <view class="i-search">
                <text
                    class="icon-font search-icon d-btn"
                    v-if="isSearching"
                    @click="delKw()"
                    >{{ "\ue64a" }}</text
                >
            </view>
            <text class="icon-font search-icon s-btn" @click="doSearch()">{{
                "\ue605"
            }}</text>
        </view>
        <view class="l-box">
            <levelComp
                class="l-st"
                ref="fisrt"
                :type="type"
                :level="0"
                :spec="spec"
                @selectedData="selectedData"
                @onClickTab="onClickTab"
                @onClickItem="onClickItem"
                @moreSpec="moreSpec"
            >
            </levelComp>
            <levelComp
                class="l-st"
                ref="second"
                :type="type"
                v-show="showSec"
                :level="1"
                :spec="spec"
                @selectedData="selectedData"
                @onClickTab="onClickTab"
                @onClickItem="onClickItem"
            >
            </levelComp>
            <levelComp
                class="l-st"
                ref="third"
                :type="type"
                v-show="showThd"
                :level="2"
                :spec="spec"
                @onClickTab="onClickTab"
                @selectedData="selectedData"
                @onClickItem="onClickItem"
            ></levelComp>
        </view>
    </view>
</template>

<script>
import levelComp from "./LevelComp.vue";
import lang from "../../js/conf/Lang.js";
import goodsCtrl from "../../js/gd/GoodsCtrl.js";
import projectCtrl from "../../js/project/GoodsCtrl.js";

export default {
    components: { levelComp },
    //type:1, //1:规格，2:分类
    props: ["type", "spec", "is_good_type","isNoShow"],
    data() {
        return {
            is_good: this.is_good_type ? this.is_good_type : 1,
            firstLevel: [], //一级
            showSec: false,
            showThd: false,
            titleTxt: {
                title: "",
                titleTxt: "",
                titleDesc: "",
            },

            isSearching: false,
            kw: "",
            placeholder: "请输入一级规格名称",
        };
    },
    methods: {
        initData(type = 1) {
            this.type = type;
            if (type == 1) {
                (this.showSec = false),
                    (this.showThd = false),
                    (this.titleTxt = lang.getSpecTxt());
                this.firstLevel = goodsCtrl.getFirstList();
                let ft = {};
                ft.title = this.titleTxt.firstSpecTitTxt;
                ft.isFirstLevel = true;
                ft.hasSon = true;
                ft.id = 0;
                let arr = [];
                arr.push(ft);
                //一级
                let data = {};
                data.titleList = arr;
                data.list = [];
                data.list = this.firstLevel;
                this.$refs.fisrt.setData(data);

                //二级
                let arr1 = goodsCtrl.getInitFirstSeleData();
                if (arr1 && arr1.length > 0) {
                    this.initSeleAndThd(arr1, 0);
                }

                //三级
                let arr2 = goodsCtrl.getInitSeleSeleData();
                if (arr2 && arr2.length > 0) {
                    this.initSeleAndThd(arr2, 1);
                }
            } else if (type == 2) {
                this.showSec = false;
                this.showThd = false;
                this.titleTxt = lang.getCatTxt();
                let data =
                    this.is_good == 1
                        ? goodsCtrl.getFirstCatList()
                        : projectCtrl.getFirstCatList();
                this.$refs.fisrt.setData(data);
                let cat =
                    this.is_good == 1
                        ? goodsCtrl.getCategory()
                        : projectCtrl.getCategory();
                if (cat.catid1) {
                    let data1 =
                        this.is_good == 1
                            ? goodsCtrl.getSecondCatList(cat.catid1.id)
                            : projectCtrl.getSecondCatList(cat.catid1.id);
                    if (data1) {
                        if (data1.list && data1.list.length > 0) {
                            this.$refs.second.setData(data1);
                            this.showSec = true;
                            if (cat.catid) {
                                let data2 =
                                    this.is_good == 1
                                        ? goodsCtrl.getThirdCatList(
                                              cat.catid.fid
                                          )
                                        : projectCtrl.getThirdCatList(
                                              cat.catid.fid
                                          );
                                if (data2) {
                                    this.$refs.third.setData(data2);
                                    this.showThd = true;
                                }
                            }
                        }
                    }
                }
            }
        },

        /***初始化,二级，三级**/
        initSeleAndThd(arr, level) {
            if (arr.length > 0) {
                let obj = {};
                obj.level = level;
                obj.data = arr[0];
                this.onClickItem(obj);
                if (level == 0) {
                    this.showSec = obj.data.hasSon;
                } else {
                    this.showThd = obj.data.hasSon;
                }
            }
        },

        initSeleThd(arr) {
            if (arr.length > 0) {
                let obj = {};
                obj.level = 1;
                obj.data = arr[0];
                this.onClickTab(obj);
                this.showThd = true;
            }
        },

        /***关闭或是打开规格***/
        selectedData(data) {
            if (this.type == 1) {
                //规格
                this.seleChangeSpec(data);
            } else if (this.type == 2) {
                this.seleChangeCat(data);
            }
        },

        /****改变规格***/
        seleChangeSpec(data) {
            let obj = goodsCtrl.selectHandler(data);

            if (data.level == 0) {
                if (
                    (obj.list && obj.list.length > 0) ||
                    (obj.titleList && obj.titleList.length > 0)
                ) {
                    if (obj.hasSon) this.showSec = true;
                    else this.showSec = false;
                    this.$refs.second.setData(obj);
                } else {
                    this.showSec = false;
                }
                if (!data.data.checked) {
                    this.$refs.second.clearList();
                    this.clearThird();
                    if (!obj.titleList || !obj.titleList.length) {
                        this.showSec = false;
                    }
                } else {
                    this.clearThird();
                }
            } else if (data.level == 1) {
                if (
                    (obj.list && obj.list.length > 0) ||
                    (obj.titleList && obj.titleList.length > 0)
                ) {
                    if (obj.hasSon) this.showThd = true;
                    else this.showThd = false;
                    this.$refs.third.setData(obj);
                } else {
                    this.showThd = false;
                }
                if (!data.data.checked) {
                    if (!obj.titleList || !obj.titleList.length) {
                        this.clearThird();
                        this.showThd = false;
                    }
                }
            }

            console.log("obj===================:", obj);

            this.$emit("changeSpec", 2);
        },

        /***改变分类***/
        seleChangeCat(data) {},

        clearThird() {
            let o = {};
            o.titList = [];
            o.list = [];
            this.$refs.third.setData(o);
            this.showThd = false;
        },

        onClickTab(data) {
            if (this.type == 1) {
                console.log("onClickTab():this.spec====:", this.spec);

                let obj = goodsCtrl.onClickTab(data);
                if (data.level == 1) {
                    this.clearThird();
                    let arr = obj.list;
                    if (arr) this.findChecked(arr, data.level);
                    this.$refs.second.setData(obj);
                } else {
                    this.$refs.third.setData(obj);
                }
            }
        },

        findChecked(arr, level) {
            let len = arr.length;
            for (let i = 0; i < len; i++) {
                let obj = arr[i];
                if (obj.checked) {
                    let data = {};
                    data.data = obj;
                    data.level = level;
                    this.selectedData(data);
                }
            }
        },

        onClickItem(data) {
            if (this.type == 1) {
                if (data.level == 2) return;
                let obj = goodsCtrl.onClickItem(data);
                if (data.level == 0) {
                    this.$refs.second.setData(obj);
                    this.showThd = false;
                } else if (data.level == 1) {
                    this.$refs.third.setData(obj);
                    if (obj.list && obj.list.length) {
                        this.showThd = true;
                    }
                }
            } else if (this.type == 2) {
                data = data.data;
                if (this.is_good == 1) {
                    goodsCtrl.onClickCatItem(data);
                } else {
                    projectCtrl.onClickCatItem(data);
                }

                if (data.level == 0) {
                    this.showThd = false;
                    if (!data.checked) {
                        this.showSec = false;
                    } else {
                        let cat0 =
                            this.is_good == 1
                                ? goodsCtrl.getFirstCatList()
                                : projectCtrl.getFirstCatList();
                        this.$refs.fisrt.setData(cat0);
                        let data2 =
                            this.is_good == 1
                                ? goodsCtrl.getSecondCatList(data.id)
                                : projectCtrl.getSecondCatList(data.id);
                        if (data2 && data2.list.length > 0) {
                            this.showSec = true;
                            this.$refs.second.setData(data2);
                        } else {
                            this.showSec = false;
                        }
                    }
                } else if (data.level == 1) {
                    if (!data.checked) {
                        this.showThd = false;
                    } else {
                        let data2 =
                            this.is_good == 1
                                ? goodsCtrl.getThirdCatList(data.id)
                                : projectCtrl.getThirdCatList(data.id);
                        if (data2 && data2.list.length > 0) {
                            this.$refs.third.setData(data2);
                            this.showThd = true;
                        } else {
                            this.showThd = false;
                        }
                    }
                }
            }
        },

        keydownEnter() {
            this.scanGunCtrl.isGun = false;
            this.doSearch();
        },

        doSearch() {
            console.log("搜索产品规格！！！！！！");

            let that = this;
            goodsCtrl.loadMoreSpec(back, this.kw);
            function back() {
                console.log("关键字搜索返回！！！！！");
                that.initData();
            }
        },

        searchInput(e) {
            if (this.kw != "") {
                this.isSearching = true;
            } else {
                this.isSearching = false;
            }
        },

        delKw() {
            if (this.isSearching) {
                this.kw = "";
                this.isSearching = false;
                this.doSearch();
            }
        },

        moreSpec() {
            console.log("moreSpec():kw==========:", this.kw);
            this.doSearch();
        },
    },
};
</script>

<style lang="scss">
.spec-box {
    font-size: 13px;
    color: #333;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    .s-tit {
        font-weight: bold;
    }
    .l-box {
        margin-top: 5px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .l-st {
            width: 256px;
            height: 300px;
            // height: 300px;
        }
    }
}
</style>
